<template>
  <div id='wrap'>
    <h1>组件v-model</h1>
    <button @click="mVal++">在父组件修改mVal的值</button>
    <model :mVal @updata:mVal="(val) => { mVal = val }"></model>

    <div>
      <p @click="mVal++">父组件绑定的值mVal：{{ mVal }}</p>
      <p @click="mVal2++">父组件绑定的值mVal2：{{ mVal2 }}</p>
      <p @click="() => userinfo.name">父组件绑定-用户信息:{{ userinfo }}</p>
      <model1></model1>
    </div>

  </div>
</template>

<script lang='ts'>
export default {

  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';
import model from './components/model.vue';
import model1 from './components/model1.vue';
const mVal = ref(100)
const mVal2 = ref(200)
const userinfo = ref({
  name: '王小桃',
  age: 16,
  sex: '女'
})
</script>

<style lang='scss'>
@use '@/assets/common.scss';
</style>
